<template>
    <div class="type">
        <div class="t-left">
            <div class="t-l-content">
                <div class="tl-c-item" v-for="(item, index) in typeLabelList" :key="item.tid" :class="{'tl-c-i-active': index == chooseType}" @click="changeType(index)">{{ item.t_name}}</div>
            </div>
        </div>
        <div class="t-right" ref="rightRef">
            <div class="t-r-content" ref="labelRef">
                <div class="tr-c-item" v-for="(type) in typeLabelList" :key="type.tid">
                    <div class="i-header">{{ type.t_name }}</div>
                    <div class="i-content">
                        <div class="l-name" v-for="label in type.label" :key="label.lid" @click="goToLabel(label.lid)">{{ label.l_name }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import manageTypeLabelStore from "@/page/administrator/index/page/manage-type-label/manage-type-label.store"
import router from "@/router";
import { Length } from "@floating-ui/core";
import { onMounted, reactive, ref, watch, nextTick } from "vue"
import { onBeforeRouteLeave } from "vue-router"

const manageTypeLabelSe = manageTypeLabelStore()

const chooseType = ref<number>(0)
let timer = ref<any>(null)
const changeType = (index: any) => {
    chooseType.value = index
    let dir = ''
    rightRef.value?.scrollTop < labelRef.value?.children[index].offsetTop ? dir = 'down' : dir = 'up'
    if(timer.value) clearInterval(timer.value)
    timer.value = setInterval(() => {
        if(dir == 'down') {
            rightRef.value.scrollTop += 40
            if(rightRef.value?.scrollTop >= labelRef.value?.children[index].offsetTop) {
                rightRef.value.scrollTop = labelRef.value?.children[index].offsetTop - 16
                clearInterval(timer.value)
            }
        } else {
            rightRef.value.scrollTop -= 40
            if(rightRef.value?.scrollTop <= labelRef.value?.children[index].offsetTop) {
                rightRef.value.scrollTop = labelRef.value?.children[index].offsetTop - 16
                clearInterval(timer.value)
            }
        }
    }, 16)
}
const rightRef = ref<any>(null)
const labelRef = ref<any>(null)
const handleScroll =  () => {
    let top = rightRef.value?.scrollTop
    let children = labelRef.value?.children
    let len = labelRef.value?.children.length
    for(let i = 0; i < len; i++) {
        if(top < children[i].offsetTop + 100) {
            chooseType.value = i
            return 
        }
    }
}
nextTick(() => {
    window.addEventListener('scroll', handleScroll, true)
})
onBeforeRouteLeave(() => {
    window.removeEventListener('scroll', handleScroll, true)
})

// 点击标签
const goToLabel = (lid: number) => {
    router.push({ 
        name: 'moreDetail',
        params: {
            id: lid,
            type: 'label'
        }
    })
}

// 获取所有数据
let typeLabelList = ref<any[]>([])
const getTypeLabelList = () => {
    manageTypeLabelSe.getTypeLabelList().then((res: any) => {
        if(res.status == 'success') {
            typeLabelList.value = res.results
        }
    })
}
onMounted(() => {
    getTypeLabelList()
})
</script>

<style lang="less" scoped>
.type {
    width: 100vw;
    height: max-content;
    min-height: calc(100vh - 6rem);
    .t-left, .t-right {
        position: relative;
        box-sizing: border-box;
        height: calc(100vh - 6rem);
        overflow: auto;
        // scroll-behavior: smooth;
    } 
    .t-left {
        position: fixed;
        top: 0;
        width: 4.5rem;
        border-right: 1px solid var(--border-color);
        padding: 1rem 0.75rem;
        .t-l-content {
            width: 100%;
            .tl-c-item {
                width: 100%;
                height: 3rem;
                text-align: center;
                line-height: 3rem;
                font-size: 16px;
                color: var(--font-color-gray);
            }
            .tl-c-i-active {
                color: var(--font-active-color);
            }
        }
    }
    .t-right {
        margin-left: 4.5rem;
        width: calc(100vw - 4.5rem);
        padding-bottom: 1rem;
        .t-r-content {
            width: 100%;
            .tr-c-item {
                margin-top: 1rem;
                .i-header {
                    margin-left: 0.75rem;
                    font-size: 14px;
                    color: var(--font-color-red);
                }
                .i-content {
                    width: 100%;
                    display: flex;
                    justify-content: flex-start;
                    flex-wrap: wrap;
                    .l-name {
                        margin-top: 1rem;
                        margin-left: 0.75rem;
                        display: inline-block;
                        width: 28.5%;
                        height: 4.5rem;
                        background-color: var(--bg-color-gray);
                        line-height: 4.5rem;
                        text-align: center;
                        word-break: break-word;
                    }
                }
            }
        }
    }
}
</style>